<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
    <style>
        *{
            margin: 0;padding: 0;
        }
        #content {
            width: 1220px;height: 1300px;margin: 20px auto;
        }

        #search-left {
            width: 850px;height: 1300px;float: left;
        }
        #pager{
            width: 800px;height: 30px;margin: 10px auto;line-height: 30px;text-align: center;
        }
        #pager a{
            color: #FFFFFF;display: inline-block;width: 50px;height: 30px;border: 1px solid #FFFFFF;
        }
        #pager span{
            color: #FFFFFF;display: inline-block;width: 50px;height: 30px;border: 1px solid red;
        }
        #pager p{
            font-size: 18px;font-weight: 400;color: #FFFFFF;letter-spacing: 5px;
        }
        #pager p input{
            width: 50px;background-color: rgb(29,31,39);color: #FFFFFF;border: 1px solid #7a80a2;height:30px;text-align: center;
        }
        #pager p button{
            background-color: #33394D;color: #FFFFFF;width: 50px;height:35px;
        }
        #search-right {
            width: 350px;height: 810px;float: left;margin-left: 20px;
        }

        #content #search-left .SK-condition{
            width: 850px;height: 60px;background-color: rgb(40,41,49);
        }
        #content #search-left .SK-condition .button{
            width: 72px;height: 60px;background-color: rgb(40,41,49);border: 0;cursor: pointer;color: rgba(255, 255, 255, 0.7);font-size: 16px;outline: none;display: inline-block;line-height: 60px;text-align: center;
        }
        .search-results li{
            width: 850px;height: 100px;margin-bottom: 10px;background-color: rgb(40,41,49);
        }
        #listed-game-img{
            width: 168px;height: 100px;float: left;
        }
        #listed-game-content{
            width: 490px;height: 99px;margin-left: 20px;padding:11.04px 0;float: left;box-sizing: border-box;
        }
        #listed-game-content .title{
            width: 490px;height: 20px;font-size: 16px;font-family: Microsoft YaHei UI;font-width: 400;line-height: 1.25rem;color: #FFFFFF;
        }
        #listed-game-price{
            float: right;margin-top: 40px;
        }
        #listed-game-price .game-sale-price{
            display: inline-block;font-size: 16px;font-family: Microsoft YaHei UI;color: #FFFFFF;margin-right: 15px;font-width: bold;
        }
        #listed-game-price .off{
            display:inline-block;width: 50px;height: 25px;background-color: red;font-size: 16px;text-align: center;line-height: 25px;font-weight: 700;color: #fff9ec;
        }
        #search-right h2{
            width: 350px;height: 45px;background: #212329;line-height: 45px;font-size: 14px;color: rgba(255, 255, 255, 0.7);text-indent: 20px;
        }
        #search-right #search-tags-two{
            width: 350px;height: 170px;padding: 10px 0;box-sizing: border-box;background-color: rgb(40,41,49);
        }
        #search-right #search-tags-three{
            width: 350px;height: 80px;padding: 10px 0;box-sizing: border-box;background-color: rgb(40,41,49);
        }
        #form2 div{
            width: 150px;height: 30px;padding-left:20px;box-sizing: border-box;font-size: 16px;color: #FFFFFF80;letter-spacing: 5px;float: left;
        }
        #form3 div{
            width: 150px;height: 30px;padding-left:20px;box-sizing: border-box;font-size: 16px;color: #FFFFFF80;letter-spacing: 5px;float: left;
        }
    </style>
</head>
<body style="background-color: rgb(29,31,39)">

<%@ include file="../common/game-header.jsp" %>
<div class="layui-container">
<div id="content">
    <div id="search-left">
        <div class="SK-condition" style="margin-bottom: 20px">
            <div class="button" ${topmenu eq '折扣' ? 'style="color:red;"' : ''}>折扣</div>
            <div class="button" ${topmenu eq '最新' ? 'style="color:red;"' : ''}>最新</div>
            <div class="button" ${topmenu eq '评分' ? 'style="color:red;"' : ''}>评分</div>
            <div class="button" ${topmenu eq '人气' ? 'style="color:red;"' : ''}>人气</div>
            <div class="button sort-price" ${topmenu eq '价格' ? 'style="color:red;"' : ''}>
                价格
                <img src="" alt="" width="15px">
            </div>

                <form action="" method="post" style="display: inline-block;margin-left:60px ">
                    <input name="searchName" type="text" placeholder="请输入游戏名" value="${param.name}" style="width: 200px;height: 30px;background-color:rgb(29,31,39);color: #FFFFFF ;border-radius: 10px;border: 3px">
                    <input  type="button" value="搜索" style="background-color:rgb(29,31,39) ;color: #FFFFFF;outline: none;border: 0;cursor: pointer">
                </form>


        </div>

        <ul class="search-results" style="list-style: none;width: 830px;">
                <c:forEach items="${ game }" var="v" varStatus="vs">
                    <a href="${bp}/list?method=detail&gameid=${v.id}">
                        <li>
                            <div id="listed-game-img">
                                <img src="${ bp }${ v.image }" alt="" style="width: 168px;height: 100px;">
                            </div>
                            <div id="listed-game-content">
                                <p class="title">${ v.name }-${ v.nickname }</p>
                                <p class="date" style="color: rgba(255, 255, 255, 0.5)">发行于${ v.time }</p>
                                <p class="tags" style="color: rgba(255, 255, 255, 0.5);margin-top: 10px"><span>${ v.type }</span></p>
                            </div>
                            <div id="listed-game-price">
                                <c:if test="${ v.off ne 0}">
                                    <span class="off">${v.off}折</span>
                                    <span style="font-size: 10px;color: darkgray">
                                    ￥${v.preprice}
                                </span>
                                </c:if>
                                <span class="game-sale-price">
                                ￥${v.price}
                            </span>
                            </div>
                        </li>
                    </a>
                </c:forEach>
        </ul>

        <%--  分页  --%>
        <div id="pager">
            <c:if test="${ empty game }">
                <h2 style="color: red">暂无数据</h2>
            </c:if>
            <c:if test="${ not empty game }">
                <c:if test="${ param.pageNum ne 1 }">
                    <a href="#" data-num="1">首页</a>
                    <a href="#" data-num="${ param.pageNum - 1 }">上一页</a>
                </c:if>


                <c:if test="${ pageCount le 8 }">
                    <c:forEach begin="1" end="${ pageCount }" step="1" var="n">
                        <c:if test="${ param.pageNum eq n }">
                            <span style="">${ n }</span>
                        </c:if>
                        <c:if test="${ param.pageNum ne n }">
                            <a href="#" data-num="${ n }">${ n }</a>
                        </c:if>
                    </c:forEach>
                </c:if>
                <c:if test="${ pageCount gt 8 and param.pageNum gt 4 and param.pageNum le pageCount - 3 }">
                    <c:forEach begin="${ param.pageNum - 4 }" end="${ param.pageNum + 3 }" step="1" var="n">
                        <c:if test="${ param.pageNum eq n }">
                            <span style="">${ n }</span>
                        </c:if>
                        <c:if test="${ param.pageNum ne n }">
                            <a href="#" data-num="${ n }">${ n }</a>
                        </c:if>
                    </c:forEach>
                </c:if>
                <c:if test="${ pageCount gt 8 and param.pageNum le 4 }">
                    <c:forEach begin="1" end="8" step="1" var="n">
                        <c:if test="${ param.pageNum eq n }">
                            <span style="">${ n }</span>
                        </c:if>
                        <c:if test="${ param.pageNum ne n }">
                            <a href="#" data-num="${ n }">${ n }</a>
                        </c:if>
                    </c:forEach>
                </c:if>
                <c:if test="${ pageCount gt 8 and param.pageNum gt pageCount - 3 }">
                    <c:forEach begin="${ pageCount - 7 }" end="${ pageCount }" step="1" var="n">
                        <c:if test="${ param.pageNum eq n }">
                            <span style="">${ n }</span>
                        </c:if>
                        <c:if test="${ param.pageNum ne n }">
                            <a href="#" data-num="${ n }">${ n }</a>
                        </c:if>
                    </c:forEach>
                </c:if>


                <c:if test="${ param.pageNum ne pageCount }">
                    <a href="#" data-num="${ param.pageNum + 1 }">下一页</a>
                    <a href="#" data-num="${ pageCount }">尾页</a>
                </c:if>

                <c:if test="${ pageCount ne 1 }">
                    <p>到<input type="text" name="page">页<button id="btn1">确认</button></p>
                </c:if>
            </c:if>




        </div>
    </div>
    <div id="search-right">
        <h2>按类型</h2>
        <div id="search-tags-two">
            <from id="form2">
                <div>
                    <input type="radio" name="c1" value="动作" ${ type eq '动作' ? "checked" : "" } />动作
                </div>
                <div>
                    <input type="radio" name="c1" value="射击" ${ type eq '射击' ? "checked" : "" }/>射击
                </div>
                <div>
                    <input type="radio" name="c1" value="策略" ${ type eq '策略' ? "checked" : "" }/>策略
                </div>
                <div>
                    <input type="radio" name="c1" value="角色扮演" ${ type eq '角色扮演' ? "checked" : "" }/>角色扮演
                </div>
                <div>
                    <input type="radio" name="c1" value="模拟" ${ type eq '模拟' ? "checked" : "" }/>模拟
                </div>
                <div>
                    <input type="radio" name="c1" value="体育" ${ type eq '体育' ? "checked" : "" }/>体育
                </div>
                <div>
                    <input type="radio" name="c1" value="独立" ${ type eq '独立' ? "checked" : "" }/>独立
                </div>
                <div>
                    <input type="radio" name="c1" value="休闲" ${ type eq '休闲' ? "checked" : "" }/>休闲
                </div>
                <div>
                    <input type="radio" name="c1" value="冒险" ${ type eq '冒险' ? "checked" : "" }/>冒险
                </div>
                <div>
                    <input type="radio" name="c1" value="竞速" ${ type eq '竞速' ? "checked" : "" }/>竞速
                </div>
            </from>
        </div>
        <h2>按价格</h2>
        <div id="search-tags-three">
            <from id="form3">
                <div>
                    <input type="radio" name="c2" value="1"  ${ price eq '1' ? "checked" : "" }/>￥0-20
                </div>
                <div>
                    <input type="radio" name="c2" value="2" ${ price eq '2' ? "checked" : "" }/>￥20-50
                </div>
                <div>
                    <input type="radio" name="c2" value="3" ${ price eq '3' ? "checked" : "" }/>￥50-100
                </div>
                <div>
                    <input type="radio" name="c2" value="4" ${ price eq '4' ? "checked" : "" }/>￥>100
                </div>
            </from>
        </div>
        <h2><button id="btn2" style="width: 80px;height:45px;background-color: rgb(237,237,237);border: 0;font-size: 20px;font-weight: 600;">重置</button></h2>
    </div>
    <form action="${ bp }/list?method=list" id="form4" method="post">
        <input type="hidden" name="pageNum" value="${param.pageNum}">
        <input type="hidden" name="pageSize" value="${param.pageSize}">
        <input type="hidden" name="price" value="${param.price}">
        <input type="hidden" name="topmenu" value="${param.topmenu}">
        <input type="hidden" name="type" value="${param.type}">
        <input type="hidden" name="name" value="${param.name}">
    </form>

</div>
    <!-- 公共底部 -->
    <%@ include file="../common/footer.jsp" %>
</div>

<script src="${ bp }/static/js/jquery-3.5.1.js"></script>
<script src="${ bp }/static/layui/layui.all.js"></script>
<script type="text/javascript">
    $(function (){


        // 页面a标签点击事件
        $('#pager a').click(function (event) {
            // 阻止a标签跳转
            event.preventDefault();
            // 获取a标签上的页码
            let pageNum = $(this).data("num");
            if (pageNum !== undefined) {
                // 将页面存入表单控件
                $('[name="pageNum"]').val(pageNum);
                // 提交表单
                $('#form4').submit();
            }
        })

        //跳转到多少页
        $('#btn1').click(function (){
            let pageCount = $('[name=page]').val();
            if (pageCount != "" && pageCount<= ${ pageCount }){
                $('[name="pageNum"]').val(pageCount);
                $('#form4').submit();
            }
        })

        //重置查询表单
        $('#btn2').click(function (){
            location.href="${bp}/list?method=list&pageNum=1&pageSize=7&price=0";
        })

        let type = null;
        let price = null;
        let topmenu = null;
        let name= null;
        $('#form2').change(function (){
            // each() 方法为每个匹配元素规定要运行的函数。
            $("[name='c1']:checked").each(function(i){
                type = $(this).val();
            });
            $('[name="type"]').val(type);
            $('[name="pageNum"]').val(1);
            $('#form4').submit();
        })


        $('#form3').change(function (){
            // each() 方法为每个匹配元素规定要运行的函数。
            $("[name='c2']:checked").each(function(i){
                price = $(this).val();
            });
            $('[name="price"]').val(price);
            $('[name="pageNum"]').val(1);
            $('#form4').submit();
        })

        $('.SK-condition div').click(function (){
            topmenu = $(this).text();
            $('[name="topmenu"]').val(topmenu);
            $('[name="pageNum"]').val(1);
            $('#form4').submit();

        })

        $('[type="button"]').click(function (){
            name = $('[name="searchName"]').val()
            $('[name="name"]').val(name);
            $('[name="pageNum"]').val(1);
            $('#form4').submit();
        })




    })
</script>


</body>
</html>
